<template>
  <div class="nav-bar">
    <nav-item class="nav-item" v-for="item in navItems" :dataItem="item" :key="item.id"></nav-item>
  </div>
</template>
<script>
import NavItem from './NavigationItem.vue'
export default {
  name: 'LSNavBar',
  components: {NavItem},
  props: {
    separate: {
      type: String,
      default: '/'
    },
    navItems: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {

    }
  },
  provide() {
    return {
      LSNavBar:this
    }
  },
  mounted() {
    this.currentItemUpdated();
  },
  updated() {
    // console.log('******** nav bar updated : ', this.navItems)
    this.currentItemUpdated();
  },
  methods: {
    currentItemUpdated() {
      let items = this.$el.querySelectorAll('.nav-item__current');
      items.length && items[items.length-1].classList.remove('nav-item__current')

      items = this.$el.querySelectorAll('.nav-item');
      if (items.length) {
        items[items.length-1].classList.add('nav-item__current')
      }
    }
  }
}
</script>
<style scoped>
.nav-bar{
  display: flex;
  align-items: center;
  /* padding: 0px 5px; */
  font-size: 1rem;
  height: 40px;
  /* background-color: whitesmoke; */
  border-bottom: 1px solid #ccc;
}

.nav-bar /deep/ .nav-item:last-child .nav-item__separate{
  display: none;
  /* margin-right: 15px; */
}

.nav-bar /deep/ .nav-item:first-child .nav-item__content{
  padding-left: 0px;
}

.nav-bar .nav-item__current{
  color:#fe7300;
  font-weight: bold;
}
</style>